<template>
  <div>
    <!--    <template v-if="atLeastN(value,1)">-->
    <!--      <el-tag-->
    <!--        v-for="role in value"-->
    <!--        :key="role.role_id"-->
    <!--        type="info"-->
    <!--      >-->
    <!--        {{ role.role.label_name }}-->
    <!--      </el-tag>-->
    <!--    </template>-->
    <!--    <span v-else>-</span>-->
    <el-button
      type="text"
      @click="rolesDialog.visible = true"
    >
      <i
        :class="isEditing ? 'el-icon-edit-outline' : 'el-icon-view'"
      />
      {{ isEditing ? '修改' : '查看' }}
    </el-button>

    <el-dialog
      :visible.sync="rolesDialog.visible"
      :title="isEditing ? '修改角色' : '查看用户角色'"
    >
      <el-table
        :data="roleListFormatter"
        empty-text="暂无设置的角色"
      >
        <el-table-column prop="id" label="ID" align="center" />
        <el-table-column prop="label_name" label="角色" align="center" />
        <el-table-column prop="description" label="描述" align="center" />
        <el-table-column v-if="isEditing" label="选择" align="center">
          <template v-slot="{ row }">
            <el-button v-if="isEditing" type="text" @click="chooseRole(row.id)">
              {{ isSelected(row.id) ? '已选择' : '选择' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </div>
      </template>

    </el-dialog>
   </div>
</template>
<script>
import { atLeastN } from '@/utils/kris_utils'
import { getRoles } from '@/api/role'
export default {
  name: '',
  props: {
    value: {
      type: Array,
      default: () => ([])
    },
    isEditing: Boolean
  },
  data() {
    return {
      rolesDialog: {
        visible: false
      },
      roles: [],
      selected: []
    }
  },
  computed: {
    // selectedRoles() {
    //   return this.value || []
    // },
    roleListFormatter() {
      if (this.isEditing) return this.roles
      return this.roles.filter(role => this.selected.includes(role.id))
    }
  },
  watch: {
    value: {
      handler(n, o) {
        this.selected = JSON.parse(JSON.stringify(n))
      },
      immediate: true
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    atLeastN,
    async getRoleList() {
      try {
        const result = await getRoles()
        this.roles = result.data
      } catch (error) {
        throw new Error(error.message || '获取角色列表失败')
      }
    },

    cancel() {
      this.rolesDialog.visible = false
      this.selected = JSON.parse(JSON.stringify(this.value))
    },

    confirm() {
      this.$emit('input', this.selected)
      this.rolesDialog.visible = false
    },

    chooseRole(id) {
      console.log(this.selected,'arr');
      if (this.selected.length >=5 && !this.selected.includes(id)) 
      return this.$message.error('最多只能选择5个')
      if (this.isSelected(id)) {
        this.removeSelected(id)
      } else {
        this.addToSelected(id)
      }
    },

    isSelected(id) {
      return this.selected.includes(id)
    },

    removeSelected(id) {
      const index = this.selected.indexOf(id)
      if (index !== -1) {
        this.selected.splice(index, 1)
        // this.$emit('input', this.selectedRoles)
      }
    },

    addToSelected(itemId) {
      this.selected.push(itemId)
      // this.$emit('input', this.selectedRoles)
    }

  }
}
</script>
<style lang="scss" scoped>
</style>
